<template>
  <view class="uni-pages">
    <view v-if="detail">
      <u-image v-if="!isPlay" :src="detail.post_url" style="width: 100%;height: 450rpx"></u-image>
      <video v-show="isPlay" id="myVideo" @play="onPlay" @pause="onPause" autoplay page-gesture :src="detail.video_url"
             controls :show-center-play-btn="false" style="width: 750rpx;height: 450rpx;"></video>
    </view>
    <view class="detail-info">
      <view class="course-title">{{ detail.name }}</view>
      <view style="display: flex;align-items: center;justify-content: space-between;margin-top: 50rpx">
        <view class="course-hour">{{ detail.xn_buynum || 0}}人在学</view>
        <view class="course-hour">共{{ detail.num}}课时</view>
      </view>
    </view>
    <u-tabs-swiper v-if="detail" ref="tabs" active-color="rgb(61, 155, 246)" :bold="false" font-size="28" :list="tabs"
                   :current="currentIndex" @change="tabPageCurrentTabSelected" :is-scroll="false" swiperWidth="750">
    </u-tabs-swiper>
    <u-line></u-line>
    <scroll-view v-if="detail" scroll-y="auto" style="width: 750rpx;" @scrolltolower="reachBottom">
      <view class="bg-white" style="width: 750rpx;" v-if="currentIndex == i" v-for="(m, i) in tabs" :key="i">
        <view v-if="m.id == 0" style="padding: 32rpx">
          <u-parse class="margin-top-sm" :html="detail.content"></u-parse>
        </view>
        <view style="padding: 32rpx" v-if="m.id == 1">
          <u-collapse :accordion="false">
            <u-collapse-item :title="item.name" v-for="(item, index) in detailChapter" :key="index">
                <div style="padding: 5px 20px 0;">
                  <u-time-line>
                    <u-time-line-item v-for="subItem in item.CourseItems">
                      <!-- 此处自定义了左边内容，用一个图标替代 -->
                      <template v-slot:node>
                        <view class="u-node" style=" width: 10px;
    height: 10px;
    background: #fff;
    border: 1px solid #fdd303;
    border-radius: 50%;">
                        </view>
                      </template>
                      <template v-slot:content>
                        <view style="display: flex;justify-content: space-between;align-items: center">
                          <div>
                            <div style="font-size: 14px;color: #909399;">
                              {{ subItem.name}}
                            </div>
                            <div style="font-size: 14px;color: #909399;">
                              {{ subItem.duration}}
                            </div>
                          </div>
                          <div
                              @click="toCourse(item.id, subItem.id)"
                              style="width: 60px;
    border: 1px solid #333;
    border-radius: 13px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 19px;
    height: 21px;
    color: #333;">
                            去学习
                          </div>
                        </view>
                      </template>
                    </u-time-line-item>
                  </u-time-line>
                </div>
            </u-collapse-item>
          </u-collapse>
        </view>
      </view>
    </scroll-view>
    <div class="course-footer">
      <div class="footer-btn" @click="toCourse">去学习</div>
      <div class="footer-collect" @click="collect">
        <u-icon :name="detail.isCollect ? 'star-fill' : 'star'" size="44" color="#666"></u-icon>
        <text style="margin-left: 4px" class="text_18">收藏</text>
      </div>
    </div>
  </view>
</template>

<script>
import Vue from 'vue';
export default {
  data() {
    return {
      isPlay: false,
      background: {
        backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
      },
      id: 0,
      chapter_id: 0,
      timer: null,
      score: 5,
      content: '',
      currentIndex: 0,
      shopCount: 0,
      tabList: [],
      detail: {
        isCollect: false
      },
      detailChapter: [],
      comment_info: {},
      listHeight: 0,
      tabs: [{
        id: 0,
        name: '课程介绍'
      }, {
        id: 1,
        name: '课程目录'
      }],
      loadStatus: 'loading',
      commentList: [],
      page: 1
    };
  },
  computed: {
    starStyle() {
      let top = 0;
      // #ifdef H5 || APP-PLUS
      top = 10
      // #endif
      // #ifdef MP
      top = -9
      // #endif
      return top + 'rpx';
    },
    chapterIcon() {
      return (c) => {
        let url = '/static/icon/';
        switch (parseInt(c.lx)) {
          case 1:
            url = url + 'shipin';
            break;
          case 2:
            url = url + 'yinpin';
            break;
        }
        if (c.is_free == 0 && c.is_open == 0) {
          url = url + '_no';
        }
        return url + '.png';
      }
    }
  },
  methods: {
    toCourse(chapterId = '', id = '') {
      uni.navigateTo({
        url: `/pages/course/play?courseId=${this.detail.id}&chapterId=${chapterId}&id=${id}`
      });
    },
    collect() {
      this.detail.isCollect = !this.detail.isCollect;
    },
    tabPageCurrentTabSelected(index) {
      const me = this;
      this.currentIndex = index;
      this.currentId = this.tabs[index].id;
      if (this.detail.is_open == 1) {
        if (index == 2) {
          this.listHeight = uni.upx2px(this.pageHeight) - uni.upx2px(100) - uni.upx2px(140);
        } else {
          this.listHeight = uni.upx2px(this.pageHeight) - uni.upx2px(100);
        }
      }
    },
    getCourseInfo(id) {
      this.$api.getCourseInfo(id).then(res => {
        this.detail = {
          ...res,
          isCollect: false
        }
      })
      console.log('id',id)
      this.$api.getChapterList(id).then(res => {
        this.detailChapter = res
      })
    },
    getCommentDetail() {
      this.$http.post(this.$api.course.getCommentDetail, {
        cid: this.id
      }).then(res => {
        this.comment_info = res.data;
      });
    },
    getCommentList() {
      this.$http.post(this.$api.course.getCommentList, {
        cid: this.id,
        page: this.page,
        size: 10
      }).then(res => {
        if (res.data.length < 10) {
          this.loadStatus = 'nomore';
        } else {
          this.loadStatus = 'loadmore';
        }
        this.commentList = this.commentList.concat(res.data)
        this.count = res.wait;
        this.page++;
      }).catch(err => {
        this.status = 'loadmore';
      })
    },
    agreeComment(id, index, is_agree, agree_num) {
      this.$http.post(this.$api.course.agreeComment, {
        id: id
      }).then(res => {
        if (res) {
          agree_num = agree_num == null ? 0 : agree_num;
          Vue.set(this.commentList[index], 'agree_num', is_agree == 0 ? (agree_num + 1) : (
              agree_num - 1));
          Vue.set(this.commentList[index], 'is_agree', is_agree == 0 ? 1 : 0);

        }
      })
    },
    onPlayVideo(cid) {
      this.$http.post(this.$api.course.playVideo, {
        cid: cid
      }).then(res => {
        if (res > 0) {
          this.chapter_id = cid;
          this.detail.video_url = res.data;
        }
      })
    },
    addStudyLog() {
      this.$http.post(this.$api.course.addStudyLog, {
        course_id: this.detail.id,
        chapter_id: this.chapter_id,
        study_time: 30
      });
    },
    reachBottom() {
      if (this.currentIndex == 2) {
        if (this.commentList.length > 0 && this.loadStatus != 'nomore') {
          this.loadStatus = 'loading';
          // 模拟数据加载
          setTimeout(() => {
            this.getCommentList();
          }, 1000)
        }
      }
    },
    onPlay() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.addStudyLog();
      }, 30000);
    },
    onPause() {
      clearInterval(this.timer);
    }
  },
  onHide() {
    clearInterval(this.timer);
  },
  onLoad(option) {
    console.log('option',option)
    this.getCourseInfo(option.id)
  }
};
</script>

<style scoped>
.course-footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  padding: 21px 10px;
  background-color: #fff;
  box-shadow: 0 -3px 8px 0 rgba(0, 0, 0, .08);
  display: flex;
  align-items: center;
  .footer-btn {
    text-align: center;
    width: 600rpx;
    color: #fff;
    font-size: 24rpx;
    line-height: 70rpx;
    background-color: rgb(61, 155, 246);
    border-radius: 32rpx;
    height: 70rpx;
  }
  .footer-collect {
    flex-shrink: 0;
    margin-right: 25px;
    display: flex;
    align-items: center;
    margin-left: 17px;
  }
}
.detail-info {
  position: relative;
  width: 100%;
  min-height: 100px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30rpx 30rpx 20rpx 30rpx;
  border-radius: 30rpx 30rpx 0 0;
  overflow: hidden;
  margin-top: -30rpx;
  margin-bottom: 20rpx;
  .course-title {
    font-size: 28rpx;
    font-weight: 800;
    color: #000;
  }
  .course-hour {
    margin: 8rpx 0 10rpx;
    color: #999;
    font-size: 24rpx;
    line-height: 28rpx;
    white-space: nowrap;
  }
}
.bg-white {
  background-color: #ffffff;
}
.margin-left-sm {
  margin-left: 20rpx;
}
.padding-lr {
  padding: 24rpx 32rpx;
}
.tabbar {
  flex-direction: row;
  height: 100rpx;
}

.tab {
  width: 120rpx;
  justify-content: center;
  align-items: center;
  position: relative;
}

.boderleft {
  border-left-style: solid;
  border-left-width: 1rpx;
  border-left-color: #e5e5e5;
}

.title {
  font-size: 18rpx;
  color: #999;
  margin-top: 5rpx;
}

.cart {
  flex: 1;
  background-color: #f85;
  align-items: center;
  justify-content: center;
}

.pay {
  flex: 1;
  background-color: #FF4563;
  align-items: center;
  justify-content: center
}

.collage {
  flex: 1;
  background-color: #FF6F85;
  align-items: center;
  justify-content: center
}

.bar-bottom {
  color: #fff;
  text-align: center;
  font-size: 28rpx;
}

.clearBtn {
  margin: 0;
  padding: 0;
  line-height: 28rpx;
  background-color: #FFFFFF;
}

.clearBtn::after {
  position: unset !important;
  border: unset;
}

.i-notice {
  position: absolute;
  top: 2rpx;
  right: 20rpx;
  height: 30rpx;
  width: 30rpx;
  border-radius: 100rpx;
  font-size: 18rpx;
  line-height: 30rpx;
  text-align: center;
  color: #fff;
  background-color: #f00;
}
</style>
